<template>
  <div class="echartsPie">
    <div
      :id="echartsName"
      :style="{ width: width || '190px', height: height || '206px' }"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myChart: null,
      // 指定图表的配置项和数据
      pieoption: {
        title: {
          text: "",
          x: "center",
          y: "bottom",
          textStyle: {
            color: "rgba(102, 102, 102, 0.8)",
            fontSize: "1rem",
            fontFamily: "Microsoft YaHei",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {d}%",
        },
        legend: {
          orient: "horizontal",
          align: "auto",
          top: 0,
          left: "auto",
          itemWidth: 18,
          itemHeight: 13,
          formatter: "{name}",
          textStyle: {
            color: "#666666",
          },
          data: [],
        },
        calculable: true,
        series: [
          {
            name: "",
            type: "pie",
            radius: "75%", //饼图的半径大小
            center: ["50%", "50%"], //饼图的位置
            label: {
              //饼图图形上的文本标签
              normal: {
                show: true,
                position: "inner", //标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: "1rem", //文字的字体大小
                },
                formatter: "{d}%",
              },
            },
            data: [],
          },
        ],
      },
    };
  },
  props: {
    echartsName: {
      type: String,
      default: function () {
        return "pieChart";
      },
    },
    width: String,
    hegiht: String,
    taskOption: Object,
    reviewOption: Object,
    scoreOption: Object,
    title: String,
  },
  watch: {
    taskOption: {
      handler() {
        this.initData();
        this.createChart();
      },
      deep: true,
    },
    reviewOption: {
      handler() {
        this.initData();
        this.createChart();
      },
      deep: true,
    },
    scoreOption: {
      handler() {
        this.initData();
        this.createChart();
      },
      deep: true,
    },
  },
  created() {
    this.initData();
  },
  methods: {
    // 格式化动态数据
    initData() {
      const chartData =
        this.taskOption || this.reviewOption || this.scoreOption;
      this.pieoption.title.text = this.title;
      this.pieoption.series[0].name = this.title;
      if (this.scoreOption) {
        this.pieoption.legend.orient = "vertical";
        this.pieoption.series[0].center = ["50%", "50%"];
        this.pieoption.tooltip.formatter = `<div>{b}分数段 <br/><span style="display:inline-block;width: 14px;height: 14px;background-color: #cfca1c;border-radius:50%;"></span><span>{c}(人)&nbsp;&nbsp;&nbsp;{d}%</span></div>`;
      }
      // 初始化数据
      let pieoptionLegendData = [];
      let pieoptionSeriesData = [];
      Object.keys(chartData).forEach((item) => {
        const { name, value, itemStyle, icon, children } = chartData[item];
        pieoptionLegendData.push({
          name: name,
          // icon: icon,
        });
        pieoptionSeriesData.push({
          name: name,
          value: value,
          itemStyle: itemStyle,
          children: children ? children : undefined,
        });
      });
      this.pieoption.legend.data = pieoptionLegendData;
      this.pieoption.series[0].data = pieoptionSeriesData;
    },
    // 创建chart
    createChart() {
      // 解决toolbar重置图表功能失效
      document
        .getElementById(`${this.echartsName}`)
        ?.setAttribute("_echarts_instance_", "");
      if (!document.getElementById(`${this.echartsName}`)) return
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(
        document.getElementById(this.echartsName)
      );
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(this.pieoption);
      // 监听鼠标事件
      if (this.scoreOption) {
        this.myChart.on("click", (value) => {
          this.$emit("handleClickPie", value);
        });
      }
    },
  },
  mounted() {
    this.createChart();
  },
};
</script>

<style lang="stylus">
.echartsPie {
}
</style>